<template>
    <div>
        <h1>房态显示</h1>
        <a href="/Add">添加</a>
        <br>
        房态:
        <select v-model="find.HoumeState">
                            <option value="">请选择</option>
                            <option value="不改变">不改变</option>
                            <option value="设置开房">设置开房</option>
                            <option value="设置关闭">设置关闭</option>
                        </select>
        房态编号:
        <input type="text" v-model="find.fid">
        <input type="button" value="查询" @click="listshow">
        <table class="table">
            <thead>
                <tr>
                    <th>房态编号</th>
                    <th>房态</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{ d.Fid }}</td>
                    <td>{{ d.HoumeState }}</td>
                    <td>{{ d.State?"启用":"禁用" }}</td>
                    <td>{{ moment(d.CrateDate).format("YYYY-MM-DD") }}</td>
                    <td>
                        <input type="button" value="删除" @click="Dels(d.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            一共{{ fysy.totalnum }}条,分为{{ fysy.totalpage}}页,
            每页{{ find.pagesize }}条,当前是{{ find.pageindex }}页
        </span>
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(find.pageindex-1)">
        <input type="button" v-for="d in fysy.totalpage" :value="d" @click="FY(d)">
        <input type="button" value="下一页" @click="FY(find.pageindex+1)">
        <input type="button" value="尾页" @click="FY(fysy.totalpage)">
        页容量:
        <select v-model="find.pagesize" @change="listshow">
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="4">4条/页</option>
        </select>
        前往:
        <input type="number" v-model="find.pageindex">
        <input type="button" value="前往" @click="Shows">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';

//查询条件
const find=ref({
    fid:"",
    HoumeState:"",
    pageindex:1,
    pagesize:2
})

//循环
const data=ref([{
    "Id": 0,
  "Fid": "",
  "HoumeState": "",
  "State": true,
  "CrateDate": "2025-04-14T01:47:34.441Z"
}])

//翻页使用
const fysy=ref({
    totalnum:0,
    totalpage:0
})

onMounted(() => {
    Shows();
})

//查询
const Shows=()=>{
    axios.get("https://localhost:7267/api/Houme/GetHoum",{params:find.value}).then(res=>{
        data.value=res.data.list;
        fysy.value.totalnum=res.data.totalnum;
        fysy.value.totalpage=Math.ceil(fysy.value.totalnum/find.value.pagesize);
    })
}


//查询按钮
const listshow=()=>{
    find.value.pageindex=1;
    Shows();
}


//翻页
const FY=(vid:number)=>{
    if(vid>=1 && vid<=fysy.value.totalpage){
        find.value.pageindex=vid;
        Shows()
    }
}


//删除
const Dels=(vid:number)=>{
    if(confirm("确定要删除吗")){

    axios.get("https://localhost:7267/api/Houme/DelHoum",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            Shows();
        }else{
            alert("删除失败");
            return;
        }
    })
}
}


</script>

<style scoped>

</style>